<template>
	<view class="detail-content" v-if="loadEnd">
		<!-- 头部 -->
		<view class="user-info">
			<image src="/static/forum/circleBg.png" class="banner"></image>
			<view class="main" v-for="item in hdetails" :key="item.id">
				<view class="left">
					<view class="user-avatar"><image :src="item.image"></image></view>
					<view class="user-title">
						<view class="user-name">{{ item.title }}</view>
						<view class="user-like">{{ item.desc }}</view>
					</view>
				</view>
				<view class="right">
					<view class="like-button" @click.stop="() => attention(item.follow_status)">{{ item.follow_status == 0 ? '关注' : '取消关注' }}</view>
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="center-content">
			<!-- 标题 -->
			<view class="nav-cont">
				<view class="nav-data" v-for="item in nav_Data" :key="item.id">
					<view class="data-title" :class="{ active: newIndex == item.id }" @click="changeTitle(item.id)">{{ item.title }}</view>
				</view>
			</view>
			<!-- 帖子 -->
			<view class="main-cont" v-if="postList.length"><mainList :show-data="postList" @likePosts="likePosts"></mainList></view>
			<view class="" style="margin: 10rpx 0;color: #656565;font-size: 26rpx;text-align: center;" v-if="postList.length != 0 && !hasMore">没有更多了~</view>
		</view>
		<view class="empty" v-if="!postList.length">
			<view><image src="/static/empty.png" class="emptyi" mode="aspectFit"></image></view>
			<view class="emptyt"><text>暂无相关帖子~</text></view>
		</view>
		<!-- 发布按钮 -->
		<view class="gohome" @click="goRelease"><image src="/static/forum/reabutton.png" mode="aspectFit"></image></view>
	</view>
</template>

<script>
import mainList from '@/pages/Component/forum/component/main-list/mainList.vue'
import ikz from '@/pages/Common/tools.js'
export default {
	components: {
		mainList,
	},
	data() {
		return {
			loadEnd: false,
			//父页面id
			fatherid: 0,
			newIndex: 0,
			page: 1,
			limit: 10,
			hasMore: false,
			postList: [],
			//头部详情数据
			hdetails: {},
			nav_Data: [
				{
					id: 0,
					title: '最新',
				},
				{
					id: 1,
					title: '推荐',
				},
			],
		}
	},
	onLoad(option) {
		// this.postList = uni.getStorageSync("user_info")
		this.fatherid = option.id || ''
		this.getHeadDetails()
		this.getPostDetails()
	},
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getPostDetails()
		}
	},
	onPullDownRefresh() {
		console.log('123')
		this.page = 1
		this.postList = []
		this.getPostDetails()
		uni.stopPullDownRefresh()
	},
	methods: {
		// 去发布帖子
		goRelease() {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/release/release',
			})
		},
		//获取头部详情
		getHeadDetails() {
			let path = '/xyb/posts/posts_circle/circle_details'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				id: this.fatherid,
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					this.hdetails = res.data
				}
			})
		},
		//获取帖子详情
		getPostDetails() {
			let path = '/xyb/posts/posts_circle/circle_list'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				id: this.fatherid,
				recommend: this.newIndex,
				page: this.page,
				limit: this.limit,
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					let postList = []
					postList = res.data.data.data
					postList.forEach(el => {
						if (el.images != '') {
							// el.images = el.images.split(',')
							el.imagesNum = el.images.length
							if (el.images.length > 3) {
								el.images.slice(0, 3)
							}
						}
					})
					this.postList = this.page == 1 ? postList : [...this.postList, ...postList]
					this.hasMore = this.page < res.data.data.count / this.limit ? true : false
				}
				this.loadEnd = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		// 关注/取关频道
		attention(states) {
			let data = {
				token: uni.getStorageSync('local_user_session'),
				circle_id: this.fatherid,
			}
			let path = ''
			if (states == 0) {
				path = '/xyb/posts/posts_circle/follow'
				ikz.requestPost(path, data, res => {
					if (res.statusCode == 200) {
						this.getHeadDetails()
						uni.showToast({
							title: '关注成功',
							icon: 'none',
						})
						let pages = getCurrentPages() //获取所有页面栈实例列表
						let prevPage = pages[pages.length - 2] //上一页页面实例
						if (prevPage.$vm.circleList) {
							prevPage.$vm.circleList.forEach(el => {
								if (el.id == this.fatherid) {
									el.follow_status = 1
								}
							})
						}
					}
				})
			} else {
				uni.showModal({
					title: '确认取消关注此频道',
					confirmColor: '#F00',
					cancelColor: '#999',
					success: res => {
						if (res.confirm) {
							path = '/xyb/posts/posts_circle/follow_del'
							ikz.requestPost(path, data, res => {
								if (res.statusCode == 200) {
									this.getHeadDetails()
									uni.showToast({
										title: '取消关注成功',
										icon: 'none',
									})
									let pages = getCurrentPages() //获取所有页面栈实例列表
									let prevPage = pages[pages.length - 2] //上一页页面实例
									if (prevPage.$vm.circleList) {
										prevPage.$vm.circleList.forEach(el => {
											if (el.id == this.fatherid) {
												el.follow_status = 0
											}
										})
									}
								}
							})
						}
					},
				})
			}
		},
		// 切换分类
		changeTitle(id) {
			this.newIndex = id
			uni.showLoading({
				mask: true,
				title: '正在加载中',
			})
			this.getPostDetails()
		},
		// 点赞或取消点赞帖子
		likePosts(id, status) {
			let path = ''
			if (status == 0) {
				path = '/xyb/posts/posts/give'
			} else {
				path = '/xyb/posts/posts/give_del'
			}
			let data = {
				token: uni.getStorageSync('local_user_session'),
				posts_id: id,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					this.postList.forEach(el => {
						if (el.id == id) {
							if (el.give_status == 0) {
								el.give_status = 1
								el.give++
							} else {
								el.give_status = 0
								el.give--
							}
						}
					})
					let title = ''
					if (status == 0) {
						title = '点赞成功'
					} else {
						title = '取消点赞'
					}
					uni.showToast({
						title,
						icon: 'none',
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
.detail-content {
  .user-info {
    position: relative;
    height: 320rpx;
    overflow: hidden;
    
    .banner {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.8);
    }
    
    .main {
      position: absolute;
      bottom: 40rpx;
      left: 30rpx;
      right: 30rpx;
      display: flex;
      align-items: center;
      padding: 30rpx;
      background: #FFF;
      border-radius: 20rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
      
      .left {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
        
        .user-avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 4rpx solid #fff;
          
          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .user-title {
          margin-left: 20rpx;
          flex: 1;
          min-width: 0;
          
          .user-name {
            font-size: 34rpx;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .user-like {
            font-size: 26rpx;
            color: #666;
            margin-top: 8rpx;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      
      .right {
        margin-left: 20rpx;
        
        .like-button {
          padding: 0 30rpx;
          height: 60rpx;
          line-height: 60rpx;
          border-radius: 30rpx;
          font-size: 28rpx;
          color: #fff;
          background: linear-gradient(90deg, #FF5F15, #FF8F1F);
          white-space: nowrap;
        }
      }
    }
  }
  
  .center-content {
    box-sizing: border-box;
    position: relative;
    background: #ffffff;
    padding: 5rpx 26rpx;
    border-radius: 60rpx 60rpx 0 0;
    background-color: #f8f8f8;
  
    .nav-cont {
      width: 100%;
      padding: 20rpx;
      display: flex;
      align-items: flex-end;
  
      .nav-data {
        margin-right: 18rpx;
  
        .data-title {
          font-size: 24rpx;
          color: #555555;
  
          &.active {
            font-size: 32rpx;
            color: #000000;
            font-weight: 600;
          }
        }
      }
    }
  }
  
  .gohome {
    position: fixed;
    top: 70%;
    right: 36rpx;
    z-index: 100;
  
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx auto;

  .emptyi {
    margin-top: 50rpx;
    height: 300rpx;
  }

  .emptyt {
    margin-top: 15rpx;
    color: #666;
  }
}
</style>
